<template>
  <div class="index">
    <div>
      <el-card>
        <el-row class="map">
          <el-col>
            <IndexAmap ref="amap"></IndexAmap>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>

import '@/plugins/amap';
import amapright from '@/components/plan/amap-information';
import amapleft from '@/components/plan/ampm-Unmanned';
import Breadcrumb from 'common/Breadcrumb';
import IndexAmap from '@/amap/IndexAmap.vue';
import * as signalr from '@/utils/shioSignalR';
// import ActionPlan from './ActionPlan.vue';
// 事件总线
import bus from '@/components/common/bus';
import enums from '@/utils/enums';

export default {
  name: "Index",
  //数据
  data() {
    return {
      // 分页数据查询条件
      shipQuery: {
        // 全局模糊查询条件
        condition: {
          keyword: ''
        },
        // 当前页数
        page: 1,
        // 一页上显示多少条
        size: 5
      },
      // =================loading==================
      getloading: false,
      // =================数据====================
      shipInfoList: [],
      pointList: []
    }
  },
  //组件传值
  props: {
  },
  //方法
  methods: {
    async getShipData() {
      this.getloading = true;
      let query = this.shipQuery.condition.keyword;
      let page = this.shipQuery.page;
      let size = this.shipQuery.size;
      const { data: res } = await this.$http.get(`/usv/search?Condition.Keyword=${query}&Page=${page}&Size=${size}`);
      if (!res.errorCode) {
        this.shipInfoList = res.data.result;
        this.total = res.data.total; // 将shipInfoList得state转换成对应得无人船状态
        for (const item of this.shipInfoList) {
          item.runtimeInfo.state = enums.usvState(item.runtimeInfo.state);
        }
        console.log(this.shipInfoList);
        this.getloading = false;
      }
    },
    // 经纬度查看
    ViewLocation(data) {
      this.lnglat = data;
    },
  },
  //计算属性
  computed: {},
  //注册组件
  components: {
    Breadcrumb,
    IndexAmap
  },
  //创建前
  beforeCreate() { },
  //创建完成
  created() {
    this.getShipData()
  },
  //挂载前
  beforeMount() { },
  //挂载完成
  mounted() { },
  //更新前
  beforeUpdate() { },
  //更新完成
  updated() { },
  //销毁前
  beforeDestroy() { },
  //销毁完成
  destoryed() { },
  //监听
  watch: {},
}
</script>
<style lang="less" scoped>
.index {
  height: 100%;
}
.map {
  height: 85vh;
  .el-col {
    height: 100%;
  }
}
/deep/ .el-card__body {
  padding: 0;
}
</style>
